<%@page import="org.smartercontext.contextmger.DTO.PaymentMethodDTO"%>
<%@page import="java.util.List"%>
<%@page import="org.smartercontext.contextmger.utilities.GetUserPaymentMethod"%>
<%@page import="com.hp.hpl.jena.rdf.model.Model"%>
<%@page import="org.smartercontext.contextmger.contextsphere.ContextManagerController"%>
<%@page contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	               "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Payment Methods</title>
    <!-- Bootstrap core CSS -->
    <link rel="shortcut icon" href="Icons/scicon.png">
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="http://getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style type="text/css"></style>
 </head>
   <body style="background-color: #eee;">
<%
	
		if(session.getAttribute("username")==null){
			response.sendRedirect("login.jsp?Err=3");
		}
	
	%>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.jsp">
          <img src="Images/logoSmartContext_CircleH.png">
          <img src="Images/logoSmartContext_header.png"></a>
        </div>
        
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
          	<li><a href="index.jsp">Home</a></li>
            <li class="active"><a href="manageContext.jsp">Manage your context</a></li>
            <li><a href="recommendations.jsp">Recommendations</a></li>
            <li><a href="linkWith.jsp">Link with...</a></li>
            <li><a href="logout.jsp">Logout</a></li>
          </ul>
          <form class="navbar-form navbar-right" action="">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div><!--/.nav-collapse -->
      </div>
    </div>

	<div class="container-fluid">
	 <div class="row">
	 	 <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li><a href="manageContext.jsp">Overview</a></li>
            <li><a href="manageContext_Profile.jsp">Profile</a></li>
            <li><a href="manageContext_W&S.jsp">Work & Study</a></li>
            <li><a href="manageContext_F&F.jsp">Friends & Family</a></li>
            <li><a href="manageContext_M&M.jsp">Movies, Music & Books</a></li>
            <li><a href="manageContext_Products.jsp">Products</a></li>
            <li class="active"><a href="manageContext_PaymentM.jsp">Preferred Payment Method</a></li>
            <li><a href="PrintRDFGraphServlet" target="_blank">Watch my RDF Graph</a></li>
          </ul>
        </div>
      </div>
     </div>

	<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
	<h1 class="page-header">Preferred Payment Method</h1>
	<div style="text-align: center;">
		<form action="AddPaymentMethodServlet" method="post" enctype="multipart/form-data">
			<table class="table table-striped" style="text-align: left;">
				<tbody>
					<tr>
					<td><select name="method" onchange="validateMethod();" id="method">
					<option value="By bank transfer in advance">By bank transfer in advance</option>
					<option value="By invoice">By invoice</option>
					<option value="Cash">Cash</option>
					<option value="Check in advance">Check in advance</option>
					<option value="COD">COD</option>
					<option value="Direct debit">Direct debit</option>
					<option value="Google Checkout">Google Checkout</option>
					<option value="PayPal">PayPal</option>
					<option value="PaySwarm">PaySwarm</option>
					<option value="Credit card">Credit card</option>
					</select></td>
					<td><input type="text" name="name" size="20" placeholder="Name"/></td>
					<td><input type="text" name="descrip" size="40" placeholder="Short description"/></td>
					</tr>
					<tr>
					<td><input type="text" name="billingAddress" id="billingAddress" placeholder="Billing address" disabled="disabled"/></td>
					<td><input type="text" name="cardNumber" id="cardNumber" placeholder="Card number" disabled="disabled"/></td>
					<td><input type="text" name="expirationMonth" id="expirationMonth" maxlength="2" onchange="verifMonth();" placeholder="Expiration month" disabled="disabled"/></td>
					</tr>
					<tr>
					<td><input type="text" name="expirationYear" id="expirationYear" maxlength="4" onchange="verifYear();" placeholder="Expiration year" disabled="disabled"/></td>
					<td><input type="text" name="nameOnCard" id="nameOnCard" placeholder="Name on card" disabled="disabled"/></td>
					<td><select name="methodC"  id="methodC" disabled="disabled">
					<option value="American Express">American Express</option>
					<option value="Diners Club">Diners Club</option>
					<option value="Discover">Discover</option>
					<option value="JCB">Check in advance</option>
					<option value="COD">COD</option>
					<option value="Master Card">Master Card</option>
					<option value="VISA">VISA</option>
					</select></td>
					</tr>
				</tbody>
			</table>
			<button class="btn btn-sm btn-primary" type="submit" id="subM" style="width: 10em; height: 3em;">Save changes</button>
			<% 
     			if(request.getQueryString()!=null){
     				String error = request.getParameter("Error");
     				if(error.equals("1")){
     					out.println("<p style=\"color:maroon\">Error: The info. hasn't added to your context sphere</p>");
     				}else if(error.equals("2")){
     					out.println("<p style=\"color:maroon\">Error: The info. hasn't modified</p>");
     				}else if(error.equals("3")){
     					out.println("<p style=\"color:maroon\">Error: The info. hasn't deleted</p>");
     				}
     			}
     			%>
		</form>
		<table class="table table-striped" style="text-align: left;">
		<thead>
			<tr>
				<th>Paymenth method</th>
				<th>Name</th>
				<th>Description</th>
				<th>Options</th>
			</tr>
		</thead>
		<%
			
		if(session.getAttribute("username")!=null){
			String username = session.getAttribute("username").toString();
			
			ContextManagerController.contextManagerController();
			Model usermodel = ContextManagerController.getUsermodel(username);
			GetUserPaymentMethod gupm = new GetUserPaymentMethod();
			gupm.getUserPaymentMethods(usermodel, username);
			
			List<PaymentMethodDTO>methods = gupm.getPayments();
			
			for(int i=0;i<methods.size();i++){
				PaymentMethodDTO pmdto = methods.get(i);
				String paymentM = pmdto.getMethodType();
				String name = pmdto.getName();
				String description = pmdto.getDescription();
				
				out.println("<tr><td>"+paymentM+"</td><td>"+name+"</td><td>"+description+"</td>"+
				"<td><a href=\"DeletePaymentMethodServlet?paymentM="+paymentM+"\">Delete method</a></td>"+
				"</tr>");
			}
			
		}
		
		%>
		</table>
	</div>
	</div>
 <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script type="text/javascript" charset=ISO-8859-1>

function validateMethod(){
	
	var method=document.getElementById("method").value;
	
	if(method == 'Credit card'){
		document.getElementById("billingAddress").disabled = false;
		document.getElementById("cardNumber").disabled = false;
		document.getElementById("expirationMonth").disabled = false;
		document.getElementById("expirationYear").disabled = false;
		document.getElementById("nameOnCard").disabled = false;
		document.getElementById("methodC").disabled = false;
		
	}else{
		
		document.getElementById("billingAddress").disabled = true;
		document.getElementById("cardNumber").disabled = true;
		document.getElementById("expirationMonth").disabled = true;
		document.getElementById("expirationYear").disabled = true;
		document.getElementById("nameOnCard").disabled = true;
		document.getElementById("methodC").disabled = true;
	}
}

function verifMonth(){
	
	var month=document.getElementById("expirationMonth").value;
	if(month < 1){
		document.getElementById("subM").disabled = true;
		document.getElementById("expirationMonth").style.background = "#c00040";
	} else
	
	if(month > 12){
		document.getElementById("subM").disabled = true;
		document.getElementById("expirationMonth").style.background = "#c00040";
	} else
	
	if(month == ""){
		document.getElementById("subM").disabled = true;
		document.getElementById("expirationMonth").style.background = "#ffffff";
	} else {
		document.getElementById("subM").disabled = false;
		document.getElementById("expirationMonth").style.background = "#ffffff";
	}
	
}

function verifYear(){
	
	year = document.getElementById("expirationYear").value;
	
	var dateT = new Date();
	annioT = dateT.getFullYear();
	
	if(year < annioT){
		document.getElementById("subM").disabled = true;
		document.getElementById("expirationYear").style.background = "#c00040";
	}else
		
		if(year == ""){
			document.getElementById("subM").disabled = false;
			document.getElementById("expirationYear").style.background = "#ffffff";
		}else{
			document.getElementById("subM").disabled = false;
			document.getElementById("expirationYear").style.background = "#ffffff";
		}
}

</script>

</body>
</html>